<template>
  <div id="headSearchBox">
    <transition name="fadeInRight">
      <div
        id="head-search-box"
        class="head-search-box"
        v-show="isShowSearchBox"
        key="headsearchbox"
      >
        <div>
          <el-select v-model="value" placeholder="请选择" style="width:80px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <el-input
            style="width:550px"
            placeholder=""
            suffix-icon="el-icon-search"
            v-model="searchValue"
          >
          </el-input>
        </div>
      </div>
    </transition>
    <div class="head-search-btn" @click="clickIcon">
      <i
        id="head-search-icon"
        :class="isShowSearchBox ? 'el-icon-circle-close' : 'el-icon-search'"
      ></i>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      isShowSearchBox: false,
      searchValue: "",
      options: [
        {
          value: "1",
          label: "员工"
        },
        {
          value: "2",
          label: "词条"
        },
        {
          value: "3",
          label: "物料"
        },
        {
          value: "4",
          label: "文档"
        }
      ],
      value: "1"
    };
  },
  methods: {
    clickIcon() {
      this.isShowSearchBox = !this.isShowSearchBox;
      if (!this.isShowSearchBox) {
        setTimeout(() => {
          this.$emit("clickIcon");
        }, 300);
      } else {
        this.$emit("clickIcon");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#headSearchBox {
  // max-width: 680px;
  padding-right: 30px;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  .el-input .el-input__inner {
    width: 80px !important;
  }
}
.head-search-box {
  padding-right: 20px;
  height: 50px;
  display: flex;
  justify-content: left;
}
.head-search-btn {
  font-size: 24px;
}
.fadeInRight-enter-active,
.fadeInRight-leave-active {
  transition: all 0.5s;
}
.fadeInRight-enter,
.fadeInRight-leave-to {
  opacity: 0;
  transform: translateX(630px);
}
</style>
